<template>
  <!-- style="background-color: #8a8a8a;" -->
  <q-dialog v-model="dialogShow">
    <div style="width: 100%;" :class="{ center: !isWeChat() }">
      <!-- <div v-if="isWeChat()" class="" style="background-color: black; width: 100%; height: 100vh"> -->
      <div v-if="isWeChat()" class="">
        <img src="~/assets/images/prod/new-ydbg.png" alt="ydbg" class="ydbg-img" />
        <div class="fixed-full">
          <!-- <img src="~/assets/images/prod/yd_image.png" alt="ydbg" class="ydbg-img1" /> -->
          <div class="ydbg-img1">
            <q-img src="~/assets/images/prod/yd_image.png" :ratio="228 / 125" no-spinner width="100%" no-transition />
            <div class="btn-copy" @click="copyLink"></div>
          </div>
          <div class="absolute jiantou jiantou-top" style="">
            <img src="~/assets/images/prod/yd_image1.png" alt="ydbg" class="block absolute"
              style="width: 90%; right: 0;top: 0;" />
            <img src="~/assets/images/prod/yd_image2.png" alt="ydbg" class="block absolute"
              style="width: 30%; left: 0;bottom: 0;" />
          </div>
          <div class="absolute jiantou jiantou-bottom" style="">
            <img src="~/assets/images/prod/yd_image1.png" alt="ydbg" class="block absolute"
              style="width: 90%; right: 0;bottom: 0;transform: rotateX(180deg);" />
            <img src="~/assets/images/prod/yd_image2.png" alt="ydbg" class="block absolute"
              style="width: 30%; left: 0;top: 0;" />
          </div>
        </div>
      </div>
      <q-spinner v-else color="primary" size="70px" :thickness="3" />
    </div>
  </q-dialog>
</template>

<script setup lang="ts">
import { isWeChat } from 'src/utils/lib';
import { computed, nextTick, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import copy from 'copy-to-clipboard';
import { showToast, } from 'vant';
import { showPaylaod } from './ProdJump';
const route = useRoute();
const router = useRouter();
const dialogShow = ref(false);
const jumpUrl = ref('');
const show = (payload: showPaylaod) => {
  dialogShow.value = true;
  jumpUrl.value = payload.url;
  const currentQuery = {
      ...route.query,
      jumpUrl: jumpUrl.value
  };
  router.replace({ query: currentQuery }).then(() => {
      setTimeout(() => {
          dialogShow.value = true;
      }, 200);
  });
  if (!isWeChat()) {
    jumpUrl.value ? (window.location.href = jumpUrl.value) : router.replace({ path: '/', query: route.query });
  }
}
const copyLink = () => {
  copy(jumpUrl.value)
  showToast('已成功复制链接')
}
defineExpose({
  show
})
</script>

<style lang="scss" scoped>
.ydbg-img {
  position: fixed;
  display: block;
  left: 0;
  top: calc(100% - 400px);
  width: 100%;
  height: 515px;
  z-index: 10;
  object-fit: scale-down;
}

.ydbg-img1 {
  width: 74%;
  position: absolute;
  top: 20%;
  left: 13%;

  .btn-copy {
    position: absolute;
    width: 46%;
    left: 30%;
    height: 29%;
    bottom: 0%;
    z-index: 11;
  }
}

.jiantou {
  $width: 40px;
  width: $width;
  height: calc($width / 0.6);

  &.jiantou-top {
    // background-color: red;
    right: 20px;
    top: 20px;
  }

  &.jiantou-bottom {
    right: 14%;
    top: 45%;
  }
}
</style>
